import { Resizable } from 'react-resizable';
import axios from 'axios';
import React, { useEffect, useState } from 'react';
import {
  ProFormText,
  ProFormDateTimePicker,
  ProFormSelect,
} from '@ant-design/pro-components';
import { Modal } from 'antd';
import { request } from 'umi';
import '../leave/leave.less';

export default function applyLeave(props) {
    const [id,setId]=useState()
  // 员工名称
  const [aname, setAname] = useState('张研');
  // 员工部门
  const [department, setDepartment] = useState('总经办');
  // 员工岗位
  const [prodepartment, setProdepartment] = useState('总经理');
  // 考勤异常说明
  const [technological, setTechnological] = useState('');
  // 提示框
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 异常类型
  const [attendanceType, setAttendanceType] = useState('漏刷卡');
  // 考勤时间
  const [attendanceTime, setAttendanceTime] = useState('');
  // 申请时间
  const [applyTime, setCancellationTime] = useState(getFormatDate(new Date()));
  // 提示文字
  const [keyWord, setKeyWord] = useState('');
  useEffect(()=>{
    let id =props.history.location.state.id
    setId(id)
    axios.get(`/api/ljf/updateLeave/list?id=${id}`).then(val=>{
        console.log(val.data.data[0],'修改请假数据');
        let data = val.data.data[0]
        setAttendanceType(data.attendanceType)
        setTechnological(data.technological)
    })
    
  },[])
  // 取消弹框
  const handleCancel = () => {
    props.history.push('/person/attendance')

    setIsModalOpen(false);
  };
  const ModalFalse = () => {


    setIsModalOpen(false);
  };
  // 标准时间
  function getFormatDate(defaultdate: any) {
    let date = defaultdate;
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    let hour = date.getHours();
    let minutes = date.getMinutes();
    let seconds = date.getSeconds();
    month = month < 10 ? '0' + month : month;
    day = day < 10 ? '0' + day : day;
    hour = hour < 10 ? '0' + hour : hour;
    minutes = minutes < 10 ? '0' + minutes : minutes;
    seconds = seconds < 10 ? '0' + seconds : seconds;
    let currentDate =
      year +
      '-' +
      month +
      '-' +
      day +
      ' ' +
      hour +
      ':' +
      minutes +
      ':' +
      seconds;
    return currentDate;
  }
  // 点击保存
  const applySubmit = () => {
    if (!attendanceTime) {
      setIsModalOpen(true);
      setKeyWord('考勤时间');
    } else {
      const number = [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'G',
        'K',
        'U',
        'V',
        'W',
        'R',
        'S',
        'T',
        'O',
        'P',
        'Q',
        'N',
        'M',
        'Z',
        'X',
        'Y',
        'J',
      ];
      const math = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
      let num = '';
      for (let a = 0; a <= 4; a++) {
        num += number[Math.ceil(Math.random() * 25)];
      }
      num += String(new Date()).split(' ')[3];
      for (let a = 0; a <= 3; a++) {
        num += math[Math.ceil(Math.random() * 9)];
      }
      const body = {
        anumber: num,
        aname,
        department,
        prodepartment,
        attendanceTime,
        attendanceType,
        applyTime,
        dtype: '考勤',
        status: '未提交',
      };
      axios.post(`/api/ljf/updateLeave?id=${id}`,body).then(val=>{
        if(val.data.code===200){
         setIsModalOpen(true);
         setKeyWord('保存数据成功');
        }
     })
    //   request('/api/ljf/attendanceLeave', {
    //     method: 'post',
    //     data: body,
    //   }).then((res: any) => {
    //     if (res.code === 200) {
    //       setIsModalOpen(true);
    //       setKeyWord('保存数据成功');
    //     }
    //   });
    }
  };
  return (
    <div className="applyLeave">
      <div className="applyleave">
        <button
          onClick={() => {
            applySubmit();
          }}
        >
          保存
        </button>
        <button>保存且新增</button>
        <button>草稿箱</button>
        <button>提交审批</button>
        <button>流程图</button>
        <button>导入</button>
      </div>
      <div className="applyLeaveContent applyLeaveContent0">
        <h1>考勤异常申请单</h1>
        <table className="table">
          <tbody>
            <tr>
              <td>
                <span>*</span> 员工姓名：
              </td>
              <td>
                <ProFormText width="md" name="name" disabled value={aname} />
              </td>
              <td>
                <span>*</span> 员工部门：
              </td>
              <td>
                <ProFormText
                  width="md"
                  name="name"
                  disabled
                  value={department}
                />
              </td>
              <td>
                <span>*</span> 员工岗位：
              </td>
              <td>
                <ProFormText
                  name="prodepartment"
                  disabled
                  value={prodepartment}
                />
              </td>
            </tr>
            <tr>
              <td>
                <span>*</span> 申请时间：
              </td>
              <td>
                <ProFormText name="applyTime" disabled value={applyTime} />
              </td>
              <td>
                <span>*</span> 异常类型：
              </td>
              <td>
                <ProFormSelect
                  value={attendanceType}
                  options={[
                    {
                      value: '漏刷卡',
                      label: '漏刷卡',
                    },
                    {
                      value: '外出',
                      label: '外出',
                    },
                    {
                      value: '忘记打开',
                      label: '忘记打开',
                    },
                    {
                      value: '部门外出团建',
                      label: '部门外出团建',
                    },
                  ]}
                  name="attendanceType"
                  onChange={(e: any) => {
                    setAttendanceType(e);
                  }}
                />
              </td>
              <td>
                <span>*</span>考勤时间：
              </td>
              <td>
                <ProFormDateTimePicker
                  name="date"
                  placeholder={''}
                  initialValue={attendanceTime}
                  onChange={(e: any) => {
                    setAttendanceTime(getFormatDate(e._d));
                  }}
                />
              </td>
            </tr>
            <tr>
              <td>考勤异常说明：</td>
              <td colspan={5}>
                <input
                  type="text"
                  value={technological}
                  onChange={(e) => {
                    setTechnological(e.target.value);
                  }}
                />
              </td>
            </tr>
          </tbody>
        </table>
        <table className="table0">
          <tbody>
            <tr>
              <td colspan={9}>
                附件上传<button>批量上传</button>
              </td>
            </tr>
            <tr>
              <td>文件名称</td>
              <td>文件大小</td>
              <td>上传人</td>
              <td>上传时间</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td colspan={9}></td>
            </tr>
          </tbody>
        </table>
      </div>
      <Modal
        className="modalopen"
        title="提示对话框"
        open={isModalOpen}
        onCancel={ModalFalse}
        footer={null}
      >
        <div className="content">
          <span>i</span>
          <p>请输入{keyWord}</p>
          <button onClick={handleCancel}>确定</button>
        </div>
        
      </Modal>
    </div>
  );
}
